<template>
  <el-form :model="form" label-width="90px">
    <el-form-item label="县">
      <el-select v-model="form.first" multiple @change="updateDisable(arguments[0], 'first')">
        <el-option label="全部县" :value="-1" :disabled="firstdisableAll"></el-option>
        <el-option
          v-for="(item, index) in firstList"
          :key="index"
          :label="item.label"
          :value="item.value"
          :disabled="firstdisable"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="乡">
      <el-select v-model="form.second" multiple @change="updateDisable(arguments[0], 'second')">
        <el-option label="全部乡" :value="-1" :disabled="seconddisableAll"></el-option>
        <el-option
          v-for="(item, index) in secondList"
          :key="index"
          :label="item.label"
          :value="item.value"
          :disabled="seconddisable"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="村">
      <el-select v-model="form.third" multiple @change="updateDisable(arguments[0], 'third')">
        <el-option label="全部村" :value="-1" :disabled="thirddisableAll"></el-option>
        <el-option
          v-for="(item, index) in thirdList"
          :key="index"
          :label="item.label"
          :value="item.value"
          :disabled="thirddisable"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
import mixins from "../mixins";

const XIAN = [
  { label: "蕲春县", value: 1 },
  { label: "广济县", value: 2 },
  { label: "曹河县", value: 3 },
  { label: "户县", value: 4 }
];
const XIANG = [
  { label: "十里铺", value: 1 },
  { label: "万里乡", value: 2 },
  { label: "二蠡湖", value: 3 },
  { label: "竹林湖", value: 4 }
];
const CUN = [
  { label: "李家村", value: 1 },
  { label: "王家村", value: 2 },
  { label: "赵家村", value: 3 },
  { label: "张家村", value: 4 }
];

export default {
  mixins: [mixins],

  props: {
    value: Object
  },

  model: {
    value: 'value',
    event: 'change'
  },

  data() {
    return {
      firstList: XIAN,
      secondList: XIANG,
      thirdList: CUN,
      form: {
        first: [],
        second: [],
        third: []
      }
    }
  },

  watch: {
    value: {
      handler (val) {
        if (val) {
          for (const iterator of Object.keys(val)) {
            this.updateDisable(val[iterator], iterator)
          }
          this.form = val
        }
      },
      deep: true
    }
  },

  methods: {
    changeHandler () {
      this.$emit('change', this.form)
    }
  }
};
</script>

<style>
</style>